<template>
  <div class="play_server">
    <div class="server_box">
      <h3>玩家服务</h3>
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="itemClick(index)"
        >
          <img :src="item.icon" alt="" />
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: require("../../../assets/img/my/ic_message.png"),
          title: "消息中心",
        },
        {
          icon: require("../../../assets/img/my/ic_kefu.png"),
          title: "客服中心",
        },
        {
          icon: require("../../../assets/img/my/ic_rechargedetails.png"),
          title: "充值明细",
        },
        {
          icon: require("../../../assets/img/my/ic_notice.png"),
          title: "公告",
        },
        {
          icon: require("../../../assets/img/my/ic_game.png"),
          title: "我的游戏",
        },
        {
          icon: require("../../../assets/img/my/ic_coupon.png"),
          title: "我的礼券",
        },
        {
          icon: require("../../../assets/img/my/ic_card.png"),
          title: "我的礼包",
        },
        {
          icon: require("../../../assets/img/my/ic_feedback.png"),
          title: "意见反馈",
        },
      ],
    };
  },
  methods: {
    itemClick(index) {
      switch (index) {
        case 0:
          this.$router.push('/userinfo/message')
          break;
        case 1:
          this.$router.push('/custom_center')
          break;
        case 2:
          this.$router.push('/userinfo/recharge')
          break;
        case 3:
          this.$router.push('/userinfo/notice')
          break;
        case 4:
          this.$router.push('/userinfo/game')
          break;
        case 5:
          this.$router.push('/userinfo/coupon')
          break;
        case 6:
          this.$router.push('/userinfo/card')
          break;
        case 7:
          this.$router.push('/userinfo/Feedback')
      }
    },
  },
};
</script>

<style lang="less" scoped>
.play_server {
  width: 9.146667rem;
  height: 5.333333rem;
  padding: 0 0.426667rem;
  margin-top: 0.266667rem;
  font-size: 0.32rem;
  color: #333;
  .server_box {
    width: 9.146667rem;
    height: 5.333333rem;
    background: #fff;
    border-radius: 0.266667rem;
    h3 {
      font-size: 0.48rem;
      padding: 0.533333rem 0 0 0.266667rem;
      color: #222;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 2.286667rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.666667rem;
        img {
          width: 0.733333rem;
          height: 0.733333rem;
        }
        span {
          padding-top: 0.2rem;
        }
      }
    }
  }
}
</style>